<template>
	<view>
		<view class="head">
			<dsl-navbar title="" bgTopImg="" right2='/static/chat/guanbi.png' @rightSubmit='rightSubmit'></dsl-navbar>
		</view>
		<view class="body">
			<view class="text-center" style="line-height: 70rpx;">
				<image src="https://img2.baidu.com/it/u=1462569300,2999175010&fm=26&fmt=auto" mode="aspectFill"
					class="user_image"></image>
				<view class="text-bold">
					西死静安寺
				</view>
				<view>10：92：22</view>
				<view class="align-center rowsc">
					<image src="/static/chat/imgqian.png" mode="widthFix" style="width: 40rpx;"></image>
					<view class="margin-left-xs">获得奖励：<text class="text-lg text-red text-bold">200元</text></view>
				</view>
			</view>
			<view class="body_form padding">
				<view class="align-center">
					<view>
						不满意
					</view>
					<view class="margin-left">
						<!-- <image src="../../static/user/modules/imgxingxing-2.png" mode=""></image> -->
						<image src="/static/user/modules/imgxingxing-1.png" mode="widthFix" style="width: 40rpx;"
							v-for="(item,i) in 3" class="margin-right-xs"></image>
					</view>
				</view>
				<view class="flex flex-wrap rowsb ">
					<view class="table margin-top" v-for="(item,index) in list" :key='index'
						:class="{'table_active':index ==1}">
						{{item}}
					</view>
				</view>
				<view class="rowsc">
					<input type="text" value="" placeholder="输入其他原因" class="text-center"  maxlength="999"/>
				</view>
			</view>
		</view>
		<view class="submit">
			提交
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['多人聊天', '诱导第三方平台交易', '不出声', '不露脸', '性别作假', '敷衍了事', '态度恶劣', '欺诈骗钱', '垃圾广告', '色情行为']
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {},
		onShow() {},
		methods: {
			
			rightSubmit(){
				
			}
		},
		computed: {},
		components: {}
	}
</script>

<style>
	.head {
		background-color: #EAA019;
		height: 300rpx;
	}

	page {
		/* background-color: #EAA019; */
	}

	.user_image {
		width: 182rpx;
		height: 182rpx;
		border-radius: 50%;
		opacity: 1;
		border: 10rpx solid #FFFFFF;
		margin-top: -90rpx;
	}

	.body {
		width: 750rpx;
		height: 1132rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 30rpx 30rpx 0px 0px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.body_form {
		width: 706rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		box-shadow: 1rpx 1upx 3upx #96B9FF;
		margin: 0 auto;
	}

	.table {
		width: 300rpx;
		height: 60rpx;
		border: 1rpx solid #333333;
		border-radius: 40rpx;
		line-height: 60rpx;
		text-align: center;
		color: black;
	}

	.table_active {
		background: #C4CCD7 !important;
		opacity: 1;
		border: 1rpx solid #C4CCD7 !important;
	}

	input {
		width: 650rpx;
		height: 80rpx;
		border: 1px solid #333333;
		opacity: 1;
		border-radius: 10rpx;
		margin-top: 30rpx;
	}

	.submit {
		width: 600rpx;
		height: 90rpx;
		background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
		opacity: 1;
		margin: 0 auto;
		position: fixed;
		bottom: 30rpx;
		left: 0;
		right: 0;
		color: white;
		border-radius: 99rpx;
		text-align: center;
		line-height: 90rpx;
	}
</style>
